<template>
	<!-- 会员中心 -->
	<view class="box">
    <uni-nav-bar color="#fff" backgroundColor="#F53D46"  :title="$t('member.title')"></uni-nav-bar>
    <swiper @change="changeCard" class="swiper" indicator-dots  previous-margin="54rpx" next-margin="54rpx" indicator-active-color="#E6E6EB">
      <swiper-item  class="swiper-item" v-for="(item,index) in info.card" :key="index">
        <view class="item">
          <image :src="interfaceurl + item.img_bg" class="bg"></image>
          <view class="desc">{{item.describe}}</view>
          <view class="level">{{item.group_name}}</view>
          <view class="level">{{item.price}}</view>
          <view class="btn" v-if="info.user.cardname === item.group_name">{{$t('member.Obtain')}}</view>
          <view class="btn" @click="handleBuyCard" v-else style="color:#F53D46;">Upgrade</view>
        </view>
      </swiper-item>
    </swiper>
    <view class="card-content">
      <view class="card-name">{{info.card[current].group_name}} Privilege</view>
      <view class="rights-box">
				<rich-text :nodes="info.card[current].detail|formatRichText"></rich-text>
			</view>
    </view>
    <ZTabbar :current="1" />
  </view>
	
</template>

<script>
  import fetch from '@/common/fetch.js';
  import ZTabbar from '@/components/ZTabbar/index.vue';
  import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default{
    components: { uniNavBar,ZTabbar},
		data(){
			return{
			 info:{card:[{},{}]},
       current:0
			}
    },
		computed: {
			interfaceurl() {
				let url = fetch.interfaceUrl();
				return url;
			}
		},
		mounted(){
		  this.getInfo()
		},
		methods:{
			/**
			 * 购买会员卡
			 * */
			handleBuyCard(){
        let that = this
        //去掉判断
			//	if(!that.checkAbleMoney()) return
				uni.showModal({
				    title: this.$t('member.toast3'),
				    content: this.$t('member.toast4'),
            cancelText:this.$t('member.cancelText'),
            confirmText:this.$t('member.confirmText'),
				    success: function (res) {
              if (res.confirm) {
                  let cardid = that.info.card[that.current].id
                  fetch.request('/index/membercard/buy',{id:cardid},'POST').then(res=>{
                    if (res.code === 0 || res.code === '0') {
                      //购买成功
                      fetch.toast('Successful purchase')
                      setTimeout(function(){
                        uni.navigateTo({
                          url: '/pages/grab/index'
                        })
                      },2000)	
                    }else{
                      uni.showToast({
                        title: res.msg,
                        duration: 2000,
                        icon: 'none'
                      });
                    }				
                  })
              } 
				    }
				});
				
			},
			/**
			 * 可用资金是否足够购买
			 * */
			 checkAbleMoney(){
				 let able = this.info.user.usableSum;
				 let need = this.info.card[this.current].money_min
				 if(able<need){//可用资金不足
					 fetch.toast('Insufficient funds')
					 return false;
				 }
				 return true
			 },
			/*
			*获取会员卡列表用户信息
			*/
			getInfo(){
				fetch.request('/index/membercard','','GET').then(res=>{
					this.info = res.data		
				})
			},
			/*
			*切换会员卡
			*/
			changeCard(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="less" scoped>	
page,.box{
	height: 100%;
	position: relative;
	width: 100%;
	overflow-x: hidden;
}
 /deep/ uni-swiper .uni-swiper-dot {
    width: 6rpx;
    height: 6rpx;
    background: #E6E6EB;
    border-radius: 3rpx;
  }
  /deep/ uni-swiper .uni-swiper-dot-active {
    width: 20rpx;
    height: 6rpx;
    background: #E6E6EB;
    border-radius: 3rpx;
  }
  /deep/  uni-swiper .uni-swiper-dot::before {
      content: '';
  }
  .swiper{
    height:380rpx;
    background: url('../../static/images/member/bg.png') no-repeat;
    background-size: 100% auto;
    margin-top: -1px;
    background-position: 0 -44px;
    .item{
      width: 619rpx;
      height: 340rpx;
      position: relative;
      padding: 36rpx 40rpx;
      .bg{
        width: 619rpx;
        height: 340rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .desc{        
        font-size: 22rpx;
        font-weight: 400;
        color: #9E2C0F;
        line-height: 22rpx;
        margin-bottom: 40rpx;
      }
      .level{        
        font-size: 40rpx;
        font-weight: 800;
        color: #9E2C0F;
        line-height: 40rpx;
        margin-bottom: 20rpx;
      }
      .btn{
        width: 180rpx;
        height: 60rpx;
        background: #FFFFFF;
        border-radius: 30rpx;        
        font-size: 26rpx;
        font-weight: 800;
        color: #1E1E1F;
        line-height: 60rpx;
        position: absolute;
        right: 40rpx;
        bottom: 36rpx;
        text-align: center;
      }
    }
  }
  .card-content{
    padding: 30rpx 65rpx;
    .card-name{
      color:#EDB497;      
      font-weight: 500;
      font-size: 48rpx;;
      color: #EDB497;
      line-height: 48rpx;
      margin-bottom: 30rpx;
    }
    .card-content-item{
      margin-top: 60rpx;
      .title{        
        font-size: 28rpx;        
        font-weight: 500;
        color: #32323E;   
        margin-bottom: 20rpx;     
        line-height: 28rpx;
      }
      .des{        
      font-size: 26rpx;
      font-weight: 400;
      color: #78787D;
      line-height: 40rpx;
      }
    }
  }
  .rights-box{
			width: 100%;
			// box-shadow:0px 0rpx 48rpx 0px rgba(0,0,0,0.4);
			// border-radius: 10rpx;
			// padding: 30rpx 70rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			font-size: 28rpx;
      color: #666260;      
			.item{
				margin-bottom: 10rpx;
				position: relative;
				&::before{
					content:'';
					position: absolute;
					width: 14rpx;
					height: 14rpx;
					background: #2b62e1;
					border-radius: 50%;
					left: -28rpx;
					top: 50%;
					transform: translateY(-50%);
				}
      }
      
  }
  .rights-box img{
        max-width: 100%;
      }
</style>
